import { ref, reactive } from 'vue'

/**
 * 打字机效果 Hook
 * 提供可复用的打字机效果功能
 */
export function useTypewriter() {
  // 解析后的结果数据，用于打字机效果
  const parsedResult = ref([])
  
  // 显示的文本内容
  const displayedText = ref({})
  
  // 当前正在打字的部分
  const currentSection = ref(0)
  const currentElement = ref('')
  const isTyping = ref(false)
  const showResult = ref(false)
  
  /**
   * 设置要显示的结果数据
   * @param {Array} data 结果数据，格式为 [{title: '标题', paragraphs: ['段落1', '段落2']}]
   */
  const setResultData = (data) => {
    parsedResult.value = data
    
    // 初始化显示文本
    displayedText.value = {}
    parsedResult.value.forEach((_, index) => {
      displayedText.value[index] = {}
    })
    
    showResult.value = true
  }
  
  /**
   * 开始打字机效果
   * @param {Number} titleSpeed 标题打字速度（毫秒）
   * @param {Number} textSpeed 文本打字速度（毫秒）
   * @param {Number} sectionDelay 节之间的延迟（毫秒）
   * @param {Number} paragraphDelay 段落之间的延迟（毫秒）
   * @param {Function} highlightFn 自定义高亮函数（可选）
   */
  const startTypingEffect = async (titleSpeed = 50, textSpeed = 30, sectionDelay = 500, paragraphDelay = 200, highlightFn = null) => {
    isTyping.value = true
    
    // 逐节显示内容
    for (let sectionIndex = 0; sectionIndex < parsedResult.value.length; sectionIndex++) {
      currentSection.value = sectionIndex
      const section = parsedResult.value[sectionIndex]
      
      // 显示标题
      if (section.title) {
        currentElement.value = 'title'
        await typeText(section.title, titleSpeed)
        await sleep(paragraphDelay)
      }
      
      // 显示段落
      for (let paraIndex = 0; paraIndex < section.paragraphs.length; paraIndex++) {
        currentElement.value = 'p' + paraIndex
        if (!displayedText.value[sectionIndex]) {
          displayedText.value[sectionIndex] = {}
        }
        
        // 先正常显示文本
        await typeText(section.paragraphs[paraIndex], textSpeed, sectionIndex, paraIndex)
        
        // 打字完成后，立即应用高亮效果（如果需要的话）
        const originalText = section.paragraphs[paraIndex]
        const highlightedText = highlightFn ? highlightFn(originalText) : applyHighlight(originalText)
        if (highlightedText !== originalText) {
          displayedText.value[sectionIndex][paraIndex] = highlightedText
        }
        
        await sleep(paragraphDelay)
      }
      
      // 节之间的停顿
      await sleep(sectionDelay)
    }
    
    isTyping.value = false
  }
  
  /**
   * 普通文本打字效果
   * @param {String} text 要显示的文本
   * @param {Number} speed 打字速度（毫秒）
   * @param {Number} sectionIndex 节索引
   * @param {Number} paraIndex 段落索引
   */
  const typeText = async (text, speed, sectionIndex = null, paraIndex = null) => {
    // 如果没有提供索引，则使用当前索引
    const currentSectionIndex = sectionIndex !== null ? sectionIndex : currentSection.value
    
    // 如果是标题，则使用特殊处理
    let currentParaIndex
    if (paraIndex !== null) {
      currentParaIndex = paraIndex
    } else if (currentElement.value === 'title') {
      currentParaIndex = 'title'
    } else {
      currentParaIndex = parseInt(currentElement.value.replace('p', ''))
    }
    
    if (!displayedText.value[currentSectionIndex]) {
      displayedText.value[currentSectionIndex] = {}
    }
    
    for (let i = 0; i <= text.length; i++) {
      displayedText.value[currentSectionIndex][currentParaIndex] = text.substring(0, i)
      await sleep(speed)
    }
  }
  
  /**
   * 带HTML标签的打字效果
   * @param {String} htmlText 包含HTML标签的文本
   * @param {Number} sectionIndex 节索引
   * @param {Number} paraIndex 段落索引
   * @param {Number} speed 打字速度（毫秒）
   */
  const typeTextWithHTML = async (htmlText, sectionIndex, paraIndex, speed) => {
    // 创建一个临时元素来解析HTML
    const tempDiv = document.createElement('div')
    tempDiv.innerHTML = htmlText
    const textContent = tempDiv.textContent || tempDiv.innerText
    
    let displayText = ''
    let htmlIndex = 0
    let textIndex = 0
    
    while (textIndex < textContent.length) {
      // 找到下一个HTML标签的开始位置
      const tagStart = htmlText.indexOf('<', htmlIndex)
      
      if (tagStart !== -1 && tagStart <= htmlIndex) {
        // 如果当前位置是标签的开始
        const tagEnd = htmlText.indexOf('>', tagStart)
        if (tagEnd !== -1) {
          // 添加整个标签
          displayText += htmlText.substring(tagStart, tagEnd + 1)
          htmlIndex = tagEnd + 1
          continue
        }
      }
      
      // 添加一个字符
      displayText += htmlText.charAt(htmlIndex)
      htmlIndex++
      textIndex++
      
      // 更新显示
      displayedText.value[sectionIndex][paraIndex] = displayText
      await sleep(speed)
    }
  }

  /**
   * 应用高亮效果
   * @param {String} text 要高亮的文本
   * @param {Function} t 翻译函数
   * @returns {String} 高亮后的文本
   */
  const applyHighlight = (text, t) => {
    const highlightKeywords = ['uncontrollable_events', 'history_detail_text4', 'history_detail_text5', 'year', 'month', 'day'];
    const shouldHighlight = highlightKeywords.some(keyword => 
      text.includes(keyword) || (t && text.includes(t(keyword)))
    );
    
    if (shouldHighlight && text.trim()) {
      return `<span style="background-color: #ffeb3b; padding: 4px 8px; border-radius: 4px; display: block; margin: 2px 0; font-weight: bold;">${text}</span>`;
    }
    return text;
  }
  
  /**
   * 延迟函数
   * @param {Number} ms 延迟毫秒数
   */
  const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
  
  /**
   * 重置打字机状态
   */
  const resetTypewriter = () => {
    parsedResult.value = []
    displayedText.value = {}
    currentSection.value = 0
    currentElement.value = ''
    isTyping.value = false
    showResult.value = false
  }
  
  return {
    // 状态
    parsedResult,
    displayedText,
    currentSection,
    currentElement,
    isTyping,
    showResult,
    
    // 方法
    setResultData,
    startTypingEffect,
    resetTypewriter,
    applyHighlight
  }
}
